<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      title="选择规则范围"
      width="60%"
      :before-close="handleClose"
      append-to-body
    >
      <!-- 省份多选组件 -->
      <el-card>
        <div slot="header">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            style="font-weight: bold"
            >全国</el-checkbox
          >
        </div>
        <el-checkbox-group
          v-model="checkedProvinces"
          @change="handleCheckedProvincesChange"
        >
          <el-checkbox
            v-for="province in provinces"
            :key="province.code"
            :label="province.code"
            >{{ province.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button class="theme-background-color" @click="saveRangeData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import regionData from '../../assets/js/regionChoose.js'

export default {
  props: {
    checkedRanges: {
      type: Array,
      default: function () {
        return {}
      }
    },
    provinceVisible: {
      type: Boolean,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,

      checkAll: false,
      checkedProvinces: this.checkedRanges,
      provinces: regionData,
      // 全选变量
      isIndeterminate: false
    }
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedProvinces = val ? this.getAllData() : []
      this.isIndeterminate = false
    },
    getAllData() {
      var arr = regionData.map((res) => {
        return res.code
      })
      return arr
    },
    handleCheckedProvincesChange(value) {
      const checkedCount = value.length
      // console.log(value)
      // console.log(checkedCount)
      // console.log(this.provinces.length)
      this.checkAll = checkedCount === this.provinces.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.provinces.length
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('update:provinceVisible', false)
          done()
        })
        .catch((_) => {})
    },
    closeDialog() {
      this.$emit('update:provinceVisible', false)
    },
    saveRangeData() {
      // console.log(this.checkedProvinces)
      // console.log(this.getNameByCode())
      this.$emit('showProvincesData', {
        code: this.checkedProvinces,
        name: this.getNameByCode()
      })
      this.visible = false
      this.$emit('update:provinceVisible', false)
    },
    getNameByCode() {
      var arr = regionData.map((res) => {
        var a = this.checkedProvinces.findIndex((item) => item === res.code)
        // console.log(a)
        if (a !== -1) {
          return res.name
        } else {
          return ''
        }
      })
      arr = arr.filter((item) => {
        return item !== ''
      })
      return arr
    },
    defaultChecked() {
      console.log(this.checkedRanges)
      // console.log(this.checkAll)
      // console.log(this.isIndeterminate)

      this.checkedProvinces = this.checkedRanges
      this.handleCheckedProvincesChange(this.checkedProvinces)
    }
  },
  // 默认值
  watch: {
    provinceVisible() {
      this.visible = this.provinceVisible
      if (this.visible) this.defaultChecked()
    }
    // checkedRanges: function () {
    //   this.defaultChecked()
    // }
  }
}
</script>

<style lang="less" scoped>
.el-checkbox {
  min-width: 112px;
  margin: 5px;
}
</style>
